<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="codemirror/lib/codemirror.css"/>

  <link rel="stylesheet" href="codemirror/theme/3024-day.css"/>
  <link rel="stylesheet" href="codemirror/theme/3024-night.css"/>
  <link rel="stylesheet" href="codemirror/theme/ambiance-mobile.css"/>
  <link rel="stylesheet" href="codemirror/theme/ambiance.css"/>
  <link rel="stylesheet" href="codemirror/theme/base16-dark.css"/>
  <link rel="stylesheet" href="codemirror/theme/base16-light.css"/>
  <link rel="stylesheet" href="codemirror/theme/blackboard.css"/>
  <link rel="stylesheet" href="codemirror/theme/cobalt.css"/>
  <link rel="stylesheet" href="codemirror/theme/colorforth.css"/>
  <link rel="stylesheet" href="codemirror/theme/eclipse.css"/>
  <link rel="stylesheet" href="codemirror/theme/elegant.css"/>
  <link rel="stylesheet" href="codemirror/theme/erlang-dark.css"/>
  <link rel="stylesheet" href="codemirror/theme/lesser-dark.css"/>
  <link rel="stylesheet" href="codemirror/theme/mbo.css"/>
  <link rel="stylesheet" href="codemirror/theme/mdn-like.css"/>
  <link rel="stylesheet" href="codemirror/theme/midnight.css"/>
  <link rel="stylesheet" href="codemirror/theme/monokai.css"/>
  <link rel="stylesheet" href="codemirror/theme/neat.css"/>
  <link rel="stylesheet" href="codemirror/theme/neo.css"/>
  <link rel="stylesheet" href="codemirror/theme/night.css"/>
  <link rel="stylesheet" href="codemirror/theme/paraiso-dark.css"/>
  <link rel="stylesheet" href="codemirror/theme/paraiso-light.css"/>
  <link rel="stylesheet" href="codemirror/theme/pastel-on-dark.css"/>
  <link rel="stylesheet" href="codemirror/theme/rubyblue.css"/>
  <link rel="stylesheet" href="codemirror/theme/solarized.css"/>
  <link rel="stylesheet" href="codemirror/theme/the-matrix.css"/>
  <link rel="stylesheet" href="codemirror/theme/tomorrow-night-bright.css"/>
  <link rel="stylesheet" href="codemirror/theme/tomorrow-night-eighties.css"/>
  <link rel="stylesheet" href="codemirror/theme/twilight.css"/>
  <link rel="stylesheet" href="codemirror/theme/vibrant-ink.css"/>
  <link rel="stylesheet" href="codemirror/theme/xq-dark.css"/>
  <link rel="stylesheet" href="codemirror/theme/xq-light.css"/>
  <link rel="stylesheet" href="codemirror/theme/zenburn.css"/>

  <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css"/>

  <script src="codemirror/lib/codemirror.js"></script>
  <script src="codemirror/addon/selection/active-line.js"></script>
  <script src="codemirror/addon/fold/xml-fold.js"></script>
  <script src="codemirror/addon/edit/matchtags.js"></script>
  <script src="codemirror/addon/hint/show-hint.js"></script>
  <script src="codemirror/addon/hint/xml-hint.js"></script>
  <script src="codemirror/addon/hint/html-hint.js"></script>
  <script src="codemirror/addon/search/searchcursor.js"></script>
  <script src="codemirror/mode/markdown/markdown.js"></script>
  <style type="text/css" media="screen">
    .CodeMirror { 
        height: 100%;
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fefefe;
    }
    .CodeMirror-scroll {height: 100% ! important}
    .CodeMirror-gutter {cursor: pointer;}
  </style>
</head>
<body>

<textarea id="code" name="code"></textarea>
<script>
  var gEditor = null;
  var gChangeCallback = null;
  var gKeyPressCallback = null;
  var gChangeTimer = null;
  var gTheme  = "light";
  var gInstalled = false;
  var gInitialValue = "";

  window.onload = function(){

     function changeFunc() {
       if (gChangeTimer) {
         clearTimeout(gChangeTimer);
         gChangeTimer = null;
       }
       if (gChangeCallback)
         gChangeTimer = setTimeout(gChangeCallback, 100, gEditor.getValue());
     }

     gEditor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "markdown",
        lineNumbers: true,
        lineWrapping: false,
        value: "",
        styleActiveLine: true,
        matchTags: {bothTags: true},

        tabSize: 2,
        fixedGutter: true,
        extraGutterSize: 4,
        indentUnit: 2,
        indentWithTabs: false,
        matchBrackets: true,
        onChange: changeFunc,
      });
    getEditableElement().addEventListener("keypress", gKeyPressCallback, true);
    gEditor.setValue(gInitialValue);
    gEditor.clearHistory();
    gEditor.focus();
   };

  function getEditableElement() {
    return document.querySelector(".CodeMirror");
  }

  function useTheme(aTheme) {
    gTheme = aTheme;
    gEditor.setOption("theme", aTheme);
  }

  function getCurrentTheme()
  {
    return gTheme;
  }

  function installCodeMirror(aKeyPressCallback, aChangeCallback, aTheme, aValue) {
    gKeyPressCallback = aKeyPressCallback;
    gChangeCallback = aChangeCallback;
    gTheme = aTheme;
    gInitialValue = aValue;
  }

  function findNeedle(aForward, aInitial, aNeedle, aIsCaseSensitive)
  {
    var found = false;
    if (aInitial || !gEditor.lastNeedle) {
      var selection = gEditor.getCursor(true);
      gEditor.lastNeedle = gEditor.getSearchCursor(aNeedle, { line: selection.line, ch: selection.ch }, aIsCaseSensitive);
      found = gEditor.lastNeedle.findNext();
    }
    else {
      if (aForward) {
        found = gEditor.lastNeedle.findNext();
      }
      else {
        found = gEditor.lastNeedle.findPrevious();
      }
    }

    if (!found) { // maybe we hit the document's limits
      if (aForward) {
        gEditor.lastNeedle = gEditor.getSearchCursor(aNeedle, { line: 0, ch: 0 }, aIsCaseSensitive);
        found = gEditor.lastNeedle.findNext();
      }
      else {
        var line = gEditor.lineCount() - 1;
        var lineProse = gEditor.getLine(line);
        gEditor.lastNeedle = gEditor.getSearchCursor(aNeedle, { line: line, ch: lineProse.length }, aIsCaseSensitive);
        found = gEditor.lastNeedle.findPrevious();
      }
    }
    if (found)
      gEditor.setSelection(gEditor.lastNeedle.from(), gEditor.lastNeedle.to());

    return found;
  }
</script>
</body>
</html>
